import {NCard, NSpace, DataTableProps, NTag, NButton, NDataTable, NDrawerContent, NDrawer} from "naive-ui";
import {Component, ComponentProps, Mut, VueComponent} from "vue3-oop";
import styles from "./index.module.scss";
import { nicon } from "@/utils/IconUtil";
import SearchBar from "@/components/tool/SearchBar";

interface IToolbarAction{
  name: string,
  needCheck: boolean,
  inMore: boolean,
  onClick: (keys:any[])=>void,
}
interface IProps {
  showTitle?: boolean,
  icon?: string,
  title?: string,

  showQuickSearch?: boolean,
  showSeniorSearch?: boolean,
  onQuickSearch?: (value:string)=>void,
  onSeniorSearch?: ()=>void,

  toolbarActions?: IToolbarAction[]

  nDataTableProps?: DataTableProps,
  onRowClick?: (row:any)=>void,
  onRowDbClick?: (row:any)=>void,

}

@Component()
export default class DynaTablePanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    showTitle: {default: false},
    icon: {default:"Search"},
    title: {default:"动态表格"},

    showQuickSearch: {default:false},
    showSeniorSearch: {default:false},
    onQuickSearch: {default:()=>(value:string)=>{console.log("onQuickSearch",value)}},
    onSeniorSearch: {default:()=>()=>{console.log("onSeniorSearch")}},

    toolbarActions: {default:[]},

    nDataTableProps: {default:{} as DataTableProps},
    onRowClick: {default:()=>(row:any)=>{console.log("onRowClick",row)}},
    onRowDbClick: {default:()=>(row:any)=>{console.log("onRowDbClick",row)}},
  }

  constructor(
  ) {
    super();
  }

  @Mut() private state = {
    // 高级搜搜框
    showSeniorForm: false,
    // 勾选的数据主键数组
    checkedRowKeys: [] as any[]
  };

  // 切换显示高级搜索框
  private toggleSeniorForm=()=>{
    this.state.showSeniorForm = !this.state.showSeniorForm;
  }

  render(){

    return (
      <NCard
        class={styles.dyna_table_panel}
      >
        {{
          header:()=>(
            <NSpace><NTag bordered={false} size={'large'} style={{fontSize:'18px'}} color={{color:'whitesmoke'}}>
              {{ avatar: nicon(this.props.icon as string), default: ()=>this.props.title }}
            </NTag></NSpace>
          ),
          'header-extra':()=>(
            <NSpace>
              <SearchBar
                visible={this.props.showQuickSearch}
                showSenior={this.props.showSeniorSearch}
                onSearch={this.props.onQuickSearch}
                toggleSenior={this.toggleSeniorForm}
              />
              {this.props.toolbarActions?.map((item)=>{
                return <NButton onClick={()=>{item.onClick(JSON.parse(JSON.stringify(this.state.checkedRowKeys)))}}>{item.name}</NButton>
              })}
            </NSpace>
          ),
          default:()=>(
            <>
              <NDataTable
                remote
                striped
                {...this.props.nDataTableProps}

                rowProps={(row:any)=>(
                  {
                    onClick:(e:MouseEvent)=>{
                      e.stopPropagation();
                      this.props.onRowClick?.(row);
                    },
                    onDblclick:(e:MouseEvent)=>{
                      e.stopPropagation();
                      this.props.onRowDbClick?.(row);
                    }
                  }
                )}
                {...{
                  id: 'StdTable',
                  style: {overflow: 'hidden'}
                }}
              />
              <NDrawer
                to={'#StdTable'}
                placement={'top'}
                trap-focus={true}
                on-mask-click={this.toggleSeniorForm}
                show={this.state.showSeniorForm}
                height={300}
              >
                <NDrawerContent>
                  {{
                    default:()=>(<NCard>测试</NCard>),
                    footer:()=>(
                      <NSpace size={'small'}>
                        <NButton type={'primary'} onClick={this.props.onSeniorSearch}>搜索</NButton>
                        <NButton onClick={this.toggleSeniorForm}>取消</NButton>
                      </NSpace>
                    )
                  }}
                </NDrawerContent>
              </NDrawer>
            </>
          )
        }}
      </NCard>
    )
  }
}